<%@page contentType="text/html" pageEncoding="UTF-8"%>  
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<jsp:include page="header.jsp"/>   

<jsp:include page="navMenu.jsp"/>

<script>
    $(function() {
        $( "#dialogCreerAlbum" ).dialog({
            autoOpen: false,
            width: 640,
            height: 480,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
 
        $( "#openerCreerAlbum" ).click(function() {
            $( "#dialogCreerAlbum" ).dialog( "open" );
        });
    });  
</script>


<h2>Mes albums</h2>

<button id="openerCreerAlbum" type="button" class="btn btn-info">Créer un album</button>
<br>

    <table class="table table-striped table-hover">
        <tr>
            <th>Nom d'album</th>
            <th>Actions</th>
        </tr>
        <c:forEach var="album" items="${requestScope['albumList']}" >
            <tr class="info">
                <td style="font-weight: bold;">${album.getName()}</td>
                <td>
                    <a href="${pageContext.request.contextPath}/Album?action=ouvrirAlbum&album=${album.id}"><button class="btn btn-success">Ouvrir</button></a>
                    <button class="btn btn-danger" onclick="supprimerAlbum(${album.id})">Supprimer</button>
                </td>
            </tr>
        </c:forEach> 
    </table>

    <div id="dialogCreerAlbum" title="Creer un album" class="col-sm-12">
        <br>
        <h2>Créer un Album</h2>

        <form class="form-horizontal centered" role="form" action="Album" method="post" >
            <div class="form-group">
                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
                    <label for="nom" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 control-label">Nom  : </label>
                    <input type="text" name="nom" class="form-control" id="inputNom" placeholder="Nom">
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <label for="priv" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Privé : </label>
                    <input type="checkbox" name="priv" class="form-control" id="inputNom" placeholder="Nom">
                </div>
            </div>
            <input type="hidden" name="action" value="creerAlbum"/>  
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" name="submit" class="btn btn-success">Créer un Album</button>
                </div>
            </div>
        </form>
    </div>

<jsp:include page="footer.jsp"/>   